<template>
    <div class="diaocha">
        <div class="diao-o">
            <div class="diao-one">返回</div>
        </div>
        <div class="diao-one-q">
            <div class="diao-one-qq">问卷调查</div>
            <div class="diao-one-qqq">参与问卷小调查，为您提供更优质的服务!</div>
            <div class="diao-one-w">
                <div class="diao-one-ww">{{ info.ww }}</div>
                <div class="diao-one-www">
                    <div class="diao-one-e">{{ info.e }}</div>
                    <div class="diao-one-ee">{{ info.ee }}</div>
                </div>
            </div>
        </div>
        <div class="diao-two">
            <div class="diao-two-q">{{ info.tq }}</div>
            <div class="diao-two-qq">
                <div class="diao-two-w"></div>
                <input type="text" placeholder="请输入姓名" class="diao-two-ww">
            </div>
        </div>
        <div class="diao-two diao-two-e">
            <div class="diao-two-q">{{ info.tqq }}</div>
            <div class="diao-two-qq">
                <div class="diao-two-w"></div>
                <input type="text" placeholder="请输入手机号" class="diao-two-ww">
            </div>
        </div>
        <div class="diao-two diao-two-e">
            <div class="diao-two-q">{{ info.tqqq }}</div>
            <div class="diao-two-qq">
                <div class="diao-two-w"></div>
                <input type="text" placeholder="请输入实际经营地址" class="diao-two-ww">
            </div>
        </div>
        <div class="diao-three">
            <div class="diao-three-qqq">{{ info.te }}</div>
            <div class="diao-three-q">
                <input type="radio" class="diao-three-w">
                <div class="diao-three-qq">{{ info.a }}</div>
            </div>
            <div class="diao-three-q">
                <input type="radio" class="diao-three-w">
                <div class="diao-three-qq">{{ info.aa }}</div>
            </div>
            <div class="diao-three-q">
                <input type="radio" class="diao-three-w">
                <div class="diao-three-qq">{{ info.aaa }}</div>
            </div>
            <div class="diao-three-q">
                <input type="radio" class="diao-three-w">
                <div class="diao-three-qq">{{ info.aaaa }}</div>
            </div>
            <div class="diao-three-q">
                <input type="radio" class="diao-three-w">
                <div class="diao-three-qq">{{ info.aaaaa }}</div>
            </div>
            <div class="diao-three-q">
                <input type="radio" class="diao-three-w">
                <div class="diao-three-qq">{{ info.aaaaaa }}</div>
            </div>
        </div>
        <div class="diao-four">
            <div class="diao-four-qqq">{{ info.te }}</div>
            <div class="diao-four-q">
                <input type="checkbox" class="diao-four-w">
                <div class="diao-four-qq">{{ info.b }}</div>
            </div>
            <div class="diao-four-q">
                <input type="checkbox" class="diao-four-w">
                <div class="diao-four-qq">{{ info.bb }}</div>
            </div>
            <div class="diao-four-q">
                <input type="checkbox" class="diao-four-w">
                <div class="diao-four-qq">{{ info.bbb }}</div>
            </div>
            <div class="diao-four-q">
                <input type="checkbox" class="diao-four-w">
                <div class="diao-four-qq">{{ info.bbbb }}</div>
            </div>
            <div class="diao-four-q">
                <input type="checkbox" class="diao-four-w">
                <div class="diao-four-qq">{{ info.bbbbb }}</div>
            </div>
            <div class="diao-four-q">
                <input type="checkbox" class="diao-four-w">
                <div class="diao-four-qq">{{ info.bbbbbb }}</div>
            </div>

            <div class="diao-four-q">
                <input type="checkbox" class="diao-four-w">
                <div class="diao-four-qq">{{ info.bbbbbbb }}</div>
            </div>

            <div class="diao-four-q">
                <input type="checkbox" class="diao-four-w">
                <div class="diao-four-qq">{{ info.bbbbbbbb }}</div>
            </div>
        </div>
        <div class="diao-five">
            <div class="diao-five-q">{{ info.fq }}</div>
            <div class="diao-five-qq">
                <div class="diao-five-w"></div>
                <input type="text" placeholder="请输入建议" class="diao-five-ww">
            </div>
        </div>
        <div class="diao-six">
        <div class="diao-six-q">{{ info.sq }}</div>
        <div class="diao-six-qq">
            <div class="diao-six-w"></div>
            <div class="diao-six-w"></div>
            <div class="diao-six-w"></div>
            <div class="diao-six-w"></div>
            <div class="diao-six-ww"></div>
        </div>
    </div>
    <div class="diao-six-e">提交</div>
    </div>
  

</template> 

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            info: {
                ww: '科拓工程',
                e: '科拓工程机械（苏州）有限公司',
                ee: '统一信用代码：4938420394821',
                tq: '01. [填写] 企业联系人姓名:',
                tqq: '02. [填写] 企业联系人手机号:',
                tqqq: '03. [填写] 企业实际经营地址：',
                a: '50万以下 ',
                aa: ' 50-100万 ',
                aaa: '100-200万  ',
                aaaa: ' 200-500万  ',
                aaaaa: ' 500万以上  ',
                aaaaaa: '无贷款需求 ',
                te: '04. [单选] 目前企业融资规模:',
                b: '生产投资规模扩张过快，流动资金配套跟不上需求 ',
                bb: '原材料涨价过快，自身产品难以随之上调价格，利 润空间受到挤压 ',
                bbb: '人民币升值压力 ',
                bbbb: '出口退税率降低 ',
                bbbbb: '劳动力成本上升',
                bbbbbb: '难以从外部渠道入资 ',
                bbbbbbb: '产品销售渠道不畅 ',
                bbbbbbbb: '企业管理不善 ',
                fq: '09. [填写] 企业对融资方面是否还有其他诉求或建 议，如有请在下方填写：',
                sq: '10. 请对此次客户经理走访情况进行打分评价：',
            }
        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() { },
    mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {}
};
</script>


<style scoped lang="scss">
.diaocha {
    height: 1744px;

    .diao-o {
        background-color: #C1D2FA;
        height: 82px;
        overflow: hidden;

        .diao-one {
            margin: 59px 0 0 16px;
            font-size: 16px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;

        }
    }

    .diao-one-q {
        height: 268px;
        background-image: url('../../assets/images/diaocha.png');
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;

        .diao-one-qq {
            font-size: 31px;
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            margin: 1px 0 0 34px;

        }

        .diao-one-qqq {
            font-size: 13px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #000000;
            margin: 0 0 0 34px;
        }

        .diao-one-w {
            background-image: url('../../assets/images/fanxian.png');
            background-repeat: no-repeat;
            background-size: cover;
            height: 73px;
            margin: 33px 12px 0 12px;
            display: flex;

            .diao-one-ww {
                font-size: 12px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #FFFFFF;
                width: 33px;
                height: 33px;
                background: #3282E4;
                border-radius: 4px;
                margin: 18px 0 0 15px;
                text-align: center;
                line-height: 16px;
            }

            .diao-one-www {
                margin: 18px 0 0 7px;

                .diao-one-e {
                    font-size: 16px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #000000;
                    line-height: 17px;
                }

                .diao-one-ee {
                    font-size: 13px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #5F6269;
                }
            }
        }
    }

    .diao-two {
        margin: -89px 13px 0 13px;
        height: 104px;
        background: #FFFFFF;
        border-radius: 11px;
        border: 1px solid red;

        .diao-two-q {
            font-size: 17px;
            font-family: Helvetica Neue;
            font-weight: 500;
            color: #000000;
            margin: 17px 0 0 14px;
        }

        .diao-two-q::before {
            content: '*';
            font-size: 16px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #E3705D;
        }

        .diao-two-qq {
            display: flex;
            height: 35px;
            background: rgba(88, 186, 169, 0);
            border: 1px solid #8D8D8D;
            border-radius: 7px;
            margin: 16px 13px 0 13px;
            align-items: center;

            .diao-two-w {
                width: 1px;
                height: 14px;
                background: #356DED;
                margin-left: 12px;
            }

            .diao-two-ww {
                font-size: 14px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #909195;
                margin-left: 3px;
                height: 13px;
            }
        }
    }

    .diao-two-e {
        margin-top: 10px;
    }

    .diao-three {
        height: 292px;
        background: #FFFFFF;
        border-radius: 11px;
        margin: 11px 13px 0 13px;
        overflow: hidden;

        .diao-three-qqq {
            font-size: 17px;
            font-family: Helvetica Neue;
            font-weight: 500;
            color: #000000;
            margin: 17px 0 0 14px;
        }

        .diao-three-qqq::before {
            content: '*';
            font-size: 16px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #E3705D;
        }

        .diao-three-q {
            display: flex;
            margin: 18px 0 0 14px;

            .diao-three-w {
                height: 19xp;
                width: 19px;
            }

            .diao-three-qq {
                font-size: 14px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #2B2B2B;
                margin-left: 6px;
            }
        }
    }

    .diao-four {
        height: 389px;
        background: #FFFFFF;
        border-radius: 11px;
        margin: 11px 13px 0 13px;
        overflow: hidden;

        .diao-four-qqq {
            font-size: 17px;
            font-family: Helvetica Neue;
            font-weight: 500;
            color: #000000;
            margin: 17px 0 0 14px;
        }

        .diao-four-qqq::before {
            content: '*';
            font-size: 16px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #E3705D;
        }

        .diao-four-q {
            display: flex;
            margin: 18px 0 0 14px;

            .diao-four-w {
                height: 19xp;
                width: 19px;
            }

            .diao-four-qq {
                font-size: 14px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #2B2B2B;
                margin-left: 6px;
            }
        }
    }

    .diao-five {
        margin: 140px 13px 0 13px;
        height: 125px;
        background: #FFFFFF;
        border-radius: 11px;
        border: 1px solid red;

        .diao-five-q {
            font-size: 17px;
            font-family: Helvetica Neue;
            font-weight: 500;
            color: #000000;
            margin: 17px 0 0 14px;
        }

        .diao-five-q::before {
            content: '*';
            font-size: 16px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #E3705D;
        }

        .diao-five-qq {
            display: flex;
            height: 35px;
            background: rgba(88, 186, 169, 0);
            border: 1px solid #8D8D8D;
            border-radius: 7px;
            margin: 16px 13px 0 13px;
            align-items: center;

            .diao-five-w {
                width: 1px;
                height: 14px;
                background: #356DED;
                margin-left: 12px;
            }

            .diao-five-ww {
                font-size: 14px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #909195;
                margin-left: 3px;
                height: 13px;
            }
        }
    }
    .diao-six {
        margin: 11px 13px 0 13px;
        height: 100px;
        background: #FFFFFF;
        border-radius: 11px;
        border: 1px solid red;

        .diao-six-q {
            font-size: 17px;
            font-family: Helvetica Neue;
            font-weight: 500;
            color: #000000;
            margin: 10px 0 0 14px;
        }

        .diao-six-q::before {
            content: '*';
            font-size: 16px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #E3705D;
            }
            .diao-six-qq{
                display: flex;
                margin: 2px 0 0 64px ;
                .diao-six-w{
                    height: 27px;
                    width: 27px;
                    background-image: url('../../assets/images/huangsexing.png');
        background-repeat: no-repeat;
        background-size: cover;
        margin-right: 19px;
                }
                .diao-six-ww{
                    height: 27px;
                    width: 27px;
                    background-image: url('../../assets/images/huisebeijing.png');
        background-repeat: no-repeat;
        background-size: cover; 
                }
            }
        }
        .diao-six:hover{
            // transform: translateY(10px);
            // transform: rotate(40deg);
            transform: scale(0.5);
        }
        .diao-six-e{
            height: 39px;
background: #356DED;
border-radius: 20px;font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #FFFFFF;
line-height: 39px;
text-align: center;
margin: 15px 20px 0 20px;
        }
      
}
</style>